【WWDC22】SF SymbolsにVariable Colorが採用されて、さらに頼もしくなるね

#iOS

#Swift

リルオッサ

2022.06.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

WWDC22が始まり、今年も色々なニュースがありますね。

今回は、WWDC22のセッションで公開されている「Adopt Variable Color in SF Symbols」を見て、Varibale Colorはどんな新機能なのか簡単にまとめました。

このセッションでは、SF Symbolsに新しく追加される機能、Variable Colorについて紹介しています。

この記事で紹介する画像はセッション動画で紹介されている画像です。内容もセッション内で紹介されている内容ですのでお時間のある方は是非セッションの方を見ていただければと思います！

この記事は、お時間がない方や、まだ日本語字幕がないので難しいという方のお助けに少しでもなればと思っております。

新しいRenderingモード Automatic

直接はVariable Colorとは関係ないですが、SF Symbolsに新しく追加されるRenderingモード Automaticについての紹介がありました。

画像上のレンダリングインスペクターにあるように、RenderingモードをAutomaticにすると、各シンボルで優先されているRenderingモードで表示されます。trash.circle.fillのシンボルはモノクロームが優先されているため、モノクロームで表示されています。

Variable Color

Variableカテゴリーの中には、Variable Colorに対応しているシンボルがカテゴライズされています。また、Variableカテゴリーを選択すると、レンダリングインスペクターのカラーコントロールの下にVariable Colorのコントロールがあります。

Variable Colorは、シンボルの見た目をパーセント値で変化させることができるので、そのパーセント値を変化させる為のコントロールになります。

動画では、speaker.wave.2.circle.fillを例に実施しており、Variable Colorのコントロールを35%にすると、スピーカーの右端が薄暗くなっているのが分かります。100%にすると、薄暗くなっている部分が白色に塗られます。

Variable Colorは対応しているシンボルで使用することが出来、全てのRenderingモードに対応しています。

このようにシンボルによって、Variable Colorの影響を受けるレイヤーの数が1であったり、24であったり違いますがVariable Colorはパーセンテージで制御されている為、レイヤー数が少なかろうが多かろうが心配する必要はありません。

影響を受けるレイヤーが4つの場合

マイクの左側にあるドットはVariable Colorに対応する為の独立したレイヤーです。パーセンテージの値があるしきい値を超えるとドットがアクティブになります。

Variable Value	結果
0%	どのレイヤーもアクティブにならない
1% ~ 25%	1つ目のドットがアクティブになる
26% ~ 50%	1つ目と2つ目のドットがアクティブになる
51% ~ 75%	1つ目と2つ目と3つ目のドットがアクティブになる
76% ~ 100%	全てのドットがアクティブになる

影響受けるレイヤーが3つの場合

Variable Colorに対応する為のレイヤーが３つだった場合は、単純に区切ると1つ目は33.3333....、2つ目は66.6667のように厄介や値になりますが、丸め誤差での不具合を解消する為にレイヤー間のしきい値は小数点以下を丸め、その丸められた値から1％以上上回らないと次のレイヤーが有効にならないようになっています。

こちらのシンボルで言うと下記のような結果になります。

Variable Value	結果
0%	どのレイヤーもアクティブにならない
1% ~ 33%	1つ目のドットがアクティブになる
34% ~ 67%	1つ目と2つ目のドットがアクティブになる
68% ~ 100%	全てのドットがアクティブになる

おまけ

WWDC22のWhat's new in Xcodeで紹介されているのですが、Xcode 14からSF Symbolsを検索できるようになるようです。なんて幸せなことでしょうか。

これでSF Symbolsライフが捗りますね。

おわりに

Variable ColorはWiFi強度やバッテリー残量、明るさ、音量調節のシンボルなどでかなりの力を発揮しそうです！実際にプロダクトに使える日が来るの楽しみにしております。

今回はOverviewの箇所までのまとめでしたが、「Adopt Variable Color in SF Symbols」の6:10以降からはカスタムシンボルにVariable Colorを対応させる方法も説明してありますので日頃からカスタムシンボルを使っている方は興味深い内容になるのではないでしょうか？

こちらの記事で「SF Symbols、楽しそうだぞ」、「Variable Color、なんだかワクワクするぞ」と思っていただけたら幸いです。